<template>
  <el-table-column
    :prop="column.prop"
    :label="column.label"
    :key="index"
    :type="column.type"
    :align="column.align"
    :width="column.width"
    :resizable="column.resizable"
    :class-name="column.className"
    :show-overflow-tooltip="
      column.tooltip === undefined ? true : column.tooltip
    "
    :render-header="column.renderHeader"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :filters="column.filters"
    :filter-method="column.filterMethod"
    :label-class-name="column.labelClassName"
  >
    <template v-for="(child, cIndex) in column.children">
      <base-children-column
        v-if="child.children && child.children.length > 0"
        :key="cIndex"
        :index="cIndex"
        :col="child"
      />
      <base-table-column v-else :key="cIndex" :index="cIndex" :col="child" />
    </template>
  </el-table-column>
</template>

<script>
import BaseTableColumn from "./BaseTableColumn";
export default {
  name: "BaseChildrenColumn",
  components: { BaseTableColumn },
  props: {
    col: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return -1;
      },
    },
  },
  data() {
    return {
      column: {},
    };
  },
  watch: {
    col: {
      handler() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    init() {
      this.column = $.extend({}, this.col);
    },
  },
};
</script>

<style scoped>
</style>
